<template>
  <div class="TreeSelect">
    <div class="label">
      <div v-if="labelType === 'one'" class="type-one" @click="isShow = true">
        <div :style="{width:labelWidth}" class="label">{{ label }}</div>
        <div class="value">{{ selectedItem.name || '' }}</div>
        <i class="iconfont icondrop-down icon" style="color: #999;"></i>
      </div>
      <div v-if="labelType === 'two'" class="type-two" @click="isShow = true">
        <div class="van-cell" :class="{'van-cell--required': required}">
          <div :style="{width:labelWidth}">{{ label }}</div>
          <div>
            <span class="value-wrap">
              {{ selectedItem.name || '' }}
              <i class="iconfont icondrop-down icon" style="color: #999;"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <van-popup :show="isShow" position="bottom" custom-style="height: 70%;">
      <div class="toolbar">
        <div class="cancel" @click="handleCancel">取消</div>
        <div class="confirm" @click="handleConfirm">确认</div>
      </div>
      <div class="tree-wrap">
        <ly-tree
          ref="tree"
          v-if="isReady"
          :tree-data="treeData"
          :props="props"
          node-key="id"
          :defaultCheckedKeys="defaultCheckedKeys"
          :defaultExpandedKeys="defaultExpandedKeys"
          showRadio
        ></ly-tree>
      </div>
    </van-popup>
  </div>
</template>

<script>
import LyTree from '@/components/ly-tree/ly-tree.vue'
import api from '@/api'
import cache from '@/utils/cache'

function treeFind (treeData, id) {
  if (treeData == null) return null
  for (const obj of treeData) {
    if (Number(obj.id) === Number(id)) {
      return obj
    }
    const ret = treeFind(obj.children, id)
    if (ret) return ret
  }
  return null
}

export default {
  components: {
    LyTree,
  },
  props: {
    value: {
      type: String,
      required: true,
    },
    type: {
      type: String,
      default: '',
    },
    labelType: {
      type: String,
      default: 'one',
    },
    label: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: String,
      default: '90px',
    },
    required: {
      type: Boolean,
    },
  },
  data () {
    return {
      isShow: false,
      isReady: false,
      treeData: [],
      defaultCheckedKeys: [],
      defaultExpandedKeys: [],
      props: {
        label: 'name',
      },
    }
  },
  computed: {
    selectedItem () {
      return treeFind(this.treeData, this.value)
    },
  },
  watch: {
    value: {
      immediate: true,
      handler () {
        this.defaultCheckedKeys = [this.value]
      },
    },
  },
  created () {
    this.getTree()
  },
  methods: {
    async getTree () {
      let res
      try {
        if (this.type === 'org') {
          this.treeData = cache.orgTree.get()
          this.defaultExpandedKeys = res.result.map(item => item.id)
          this.isReady = true
        } else if (this.type === 'serviceCenter') {
        } else {
          this.treeData = cache.communityTree.get()
          this.defaultExpandedKeys = res.result.map(item => item.id)
          this.isReady = true
        }
      } catch (e) {

      }
      if (this.type === 'org') {
        res = await api.getOrgTree({ parentId: 0 })
        cache.orgTree.set(res.result)
      } else if (this.type === 'serviceCenter') {
        res = await api.getServiceCenterTree({ parentId: 0 })
      } else {
        res = await api.getCommunityTree({ parentId: 0 })
        cache.communityTree.set(res.result)
      }
      this.treeData = res.result
      this.defaultExpandedKeys = res.result.map(item => item.id)
      this.isReady = true
    },
    handleConfirm () {
      const result = this.$refs.tree.getCheckedKeys()
      this.$emit('input', result[0] || '')
      this.isShow = false
    },
    handleCancel () {
      this.isShow = false
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";
.TreeSelect {
  position: relative;
  .label {
    .type-one {
      display: flex;
      align-items: center;
      line-height: 44px;
      color: #d1272f;
      background: #fff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      .label {
        margin-left: 20px;
        margin-right: 10px;
        font-size: $fz-m;
        color: #333;
      }
      .icon {
        margin-left: 10px;
      }
    }
    .type-two {
      .value-wrap {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        min-width: 170px;
        max-width: calc(100vw - 120px);
        height: 31px;
        line-height: 31px;
        padding-left: 16px;
        padding-right: 30px;
        border: 1px solid rgba(230, 230, 230, 1);
        border-radius: 3px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #666;
        .icon {
          position: absolute;
          right: 6px;
          top: 1px;
        }
      }
    }
  }
  .toolbar {
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    padding: 0 15px;
    border-bottom: 1px solid #eee;
    color: #1989fa;
    .cancel {
      color: #999;
    }
    .confirm {
      color: #d1272f;
    }
  }
  .tree-wrap {
    position: relative;
    z-index: 9999999999;
    height: calc(70vh - 44px);
    overflow: scroll;
  }
}
</style>
